<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="search">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                            </div>
                            <div class="ibox-content">
                                <form class="form-horizontal" id="search-form">
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Account Name</label>
                                        <div class="col-xs-5">
                                            <select class="form-control" name="acct_num">
                                            <?php foreach($acct as $a): ?>
                                                <option value="<?php echo $a->account_id; ?>"><?php echo $a->acct_name; ?>&nbsp;&nbsp;(<?php echo $a->acct_num; ?>)</option>
                                            <?php endforeach; ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label"></label>
                                        <div class="col-xs-5 col-md-5">
                                            <button class="btn btn-primary btn-md m-t-n-xs search-btn pull-right" id="search-bills"> Go</button>
                                        </div>
                                    </div>
                                </form>
                                </div>
                                <div class="ibox-content">
                                    <div class="table-responsive">
                                    <table class="footable table">
                                        <thead>
                                            <tr>
                                                <th data-sort-ignore="true">Account Name</th>
                                                <th data-sort-ignore="true">Bill Date</th>
                                                <th data-sort-ignore="true" style="padding:8px;text-align:center;width:75px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="search_bill">
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('select').chosen({width: '100%'});

        $('#search-bills').click(function(){
            console.log('im click');
           $.ajax({
                    url: "<?php echo base_url($this->session->userdata('forajax') . '/get_umr'); ?>",
                    method: 'POST',
                    data: $('#search-form').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        if(data.err == 1){
                            notifymsg('danger',data.msg);
                        }else{
                            var tmp = '';
                            var count = 1;
                            var month = 0;
                            var mon = "0";
                            var mons = "";
                            var year = 0;
                            $.each(data,function(i,item) {
                                month = parseFloat(data[i].bill_month) - 1;
                                mons = month;
                                year = data[i].bill_year;
                                if(mons == 0){
                                year = parseFloat(data[i].bill_year) - 1;
                                mons = 12;
                                }
                                if(mons < 10){
                                    mons = mon.concat(month);
                                }
                                tmp += "<tr><td>"+ data[i].acct_name +"</td>"
                                     + "<td>"+ data[i].reading_date +"</td>"
                                     + "<td><a href='<?php echo base_url($this->session->userdata('forajax') . '/gen_pdf?bill_id="+data[i].bill_id+"&acct_num="+data[i].acct_num+"&bill_mon="+data[i].bill_month+"&bill_year="+data[i].bill_year+"'); ?>'><i class='fa fa-arrow-circle-o-down'></i> PDF</a></td></tr>";
                                count++;
                            });
                            $("#search_bill").html(tmp);
                            notifymsg('success','<b>Success</b>: Data Saved.');
                        }
                    },
                    beforeSend: function(){

                    }
                });
        });
    });
</script>